<template>
    <div class="container">
        <el-empty :image-size="200" class="content">
            <template #description>
                <span class="tips">您访问的页面不存在, </span>
                <span class="jump" @click="jumpToLogin">点击跳转至登录页面</span>
            </template>
        </el-empty>
    </div>
</template>

<script setup lang='ts' name="NotFound">
    import { useRouter } from 'vue-router'
    const router = useRouter()
    function jumpToLogin() {
        router.replace({
            name: "login"
        })
    }
</script>

<style scoped lang="scss">
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .content {
            transform: translateY(-20%);
        }

        .tips,
        .jump {
            font-size: 16px;
        }

        .jump {
            color: $primaryColor;
            cursor: pointer;
        }
    }
</style>